<template>
	<view class="content">
		<topMenu :show-back="false" :menu="menu" :title="title" @switchMenu="handleMenuClick"></topMenu>
		<list-view :value="merchants" @getNext="getNext" @goList="goList"></list-view>
		<u-popup overlayStyle="z-index:90" :closeable="true" :show="showDiaolg" z-index="99" :round="10" mode="center" @close="close" :mask-close-able="false">
			<view class="title">创建订单</view>
			<view style="width: 600rpx;height: auto">
				<u-cell title="选择商户" :value="selectedValue.name" @tap="showPickers()">
					<u-icon slot="right-icon" name="arrow-right" />
				</u-cell>
				<u-cell title="订单日期" :value="dates" @tap="showPickers('date')">
				</u-cell>
			</view>
			<view class="bottom">
				<view class="cancel" @tap.stop="handleCancel">取消</view>
				<view class="success" @tap.stop="handleSuccess">确认</view>
			</view>
		</u-popup>
		<u-picker :show="showPicker" :showToolbar="true" mode="selector" :columns="[merchants]" keyName="name"
			@confirm="onPickerConfirm" @cancel="()=> showPicker = false" />
		<u-datetime-picker @confirm="onDateConfirm" @cancel="()=> showDatePicker = false" :show="showDatePicker"
			v-model="dates" mode="date"></u-datetime-picker>
	</view>
</template>
<script>
	import {
		getCompany,
		createOrder
	} from "@/api/index.js"
	import {
		parseDate
	} from '@/utils/utils.js'
	import listView from './components/listView.vue'
	export default {
		data() {
			return {
				title: '首页',
				menu: [{
					name: '创建订单',
					code: 1
				}],
				showDiaolg: false,
				flag: '',
				merchants: [],
				selectedValue: {
					name: null
				},
				queryParam: {
					pageSize: 15,
					pageNum: 1,
					id: null,
					companyId: null,
					name: null
				},
				dates: parseDate(),
				showPicker: false,
				showDatePicker: false
			}
		},
		components: {
			listView
		},
		created() {
			this.getAllOrder()
		},
		methods: {
			getNext(){
				console.log('进来了')
				this.$nextTick(()=>{
					this.queryParam.pageNum++
					this.getAllOrder()
				})
			},  
			goList(merchantId, companyId) {
				console.log(arguments)
				console.log(merchantId)
				console.log(companyId)
				uni.navigateTo({
					url: `/pages/index/pages/orderList?companyId=${companyId}&merchantId=${merchantId}`
				})
			},
			handleMenuClick(code) {
				console.log(code);
				switch (code) {
					case 1:
						this.showDiaolg = true
						this.flag = 'addOrder'
						break;
				}

			},
			async getAllOrder() {
				const res = await getCompany(this.queryParam)
				this.merchants =[...this.merchants,...res.rows]
				console.log(res)
			},
			close() {
				this.showDiaolg = false
			},
			onPickerConfirm(e) {
				this.selectedValue = e.value[0]; // 获取选中的完整对象
				this.showPickers()
			},
			onDateConfirm(e) {
				let date1 = parseDate(new Date(e.value))
				this.$nextTick(() => {
					this.dates = date1
					this.showPickers('date')
					console.log('dates: ', this.dates);
				})
			},
			showPickers(flag = 'name') {
				if (flag == 'name') {
					this.showPicker = !this.showPicker
				} else {
					this.showDatePicker = !this.showDatePicker
				}
			},
			handleCancel() {
				this.showDiaolg = !this.showDiaolg
				this.selectedValue = {
					name: null
				}
				this.dates = parseDate()
			},
			async handleSuccess() {
				console.log(this.selectedValue.name)
				if (this.selectedValue.name == null) {
					console.log('进来了');
					this.$modal.msgError('商户必选')
					return false
				}
				let params = {
					merchantId: this.selectedValue.id,
					merchantName: this.selectedValue.name,
					date: this.dates
				}
				const res = await createOrder(params)
				if(res.code == 200){
					this.$modal.msgSuccess('创建成功')
					this.showDiaolg = false
					this.$tab.navigateTo(`/pages/index/pages/addOrderDetail?orderId=${res.data.id}&type=add`)
				}
				console.log(res)
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: calc(100vh-100rpx);
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>